<template>
  <div class="contents">
    <el-form
      class="demo-form-inline"
      :inline="true"
      label-position="right"
      label-width="80px"
      :model="formData"
    >
      <el-form-item label="单据类型:">
        <el-select v-model="formData.a1" placeholder="请选择">
          <el-option
            v-for="item in opt1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input v-model="formData.a2" placeholder="单号/制单人" />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary">查询</el-button>
        <el-button>导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <br />
      <div v-show="!openCol">
        <el-form-item label="采购:">
          <el-date-picker
            v-model="formData.a3"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 215px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="商品名称:">
          <el-input v-model="formData.a4" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="库房:">
          <el-select v-model="formData.a5" placeholder="请选择">
            <el-option
              v-for="item in opt2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 80px;">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
          <el-button>导出</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div style="padding-bottom: 16px;">
      <el-button plain @click="gocreate">新增</el-button>
    </div>
    <el-table :data="table1" style="width: 100%;">
      <el-table-column prop="address" label="报溢单号"></el-table-column>
      <el-table-column prop="address" label="审核时间"></el-table-column>
      <el-table-column prop="address" label="仓库"></el-table-column>
      <el-table-column prop="address" label="损溢类型"></el-table-column>
      <el-table-column prop="address" label="商品数"></el-table-column>
      <el-table-column prop="address" label="金额"></el-table-column>
      <el-table-column prop="address" label="制单人"></el-table-column>
      <el-table-column prop="address" label="状态"></el-table-column>
      <el-table-column prop="address" label="操作"></el-table-column>
    </el-table>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div class="item">
          <div>
            共
            <span class="warning-color">0</span>
            条报溢项目
          </div>
          <div>
            报溢金额合计:
            <span class="warning-color">0.00</span>
          </div>
        </div>
        <div class="item">
          <div>
            共
            <span class="warning-color">0</span>
            条报损项目
          </div>
          <div>
            报损金额合计:
            <span class="warning-color">0.00</span>
          </div>
        </div>
      </el-col>
      <el-col>
        <el-pagination
          background
          :current-page="currentPage4"
          layout="total, prev, pager, next,sizes"
          :page-size="20"
          :page-sizes="[20, 30, 40, 50]"
          style="text-align: right;"
          :total="0"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        openCol: true,
        formData: {},
        opt1: [
          {
            value: '0',
            label: '全部',
          },
          {
            value: '1',
            label: '手动报损',
          },
          {
            value: '2',
            label: '手动报溢',
          },
          {
            value: '3',
            label: '盘点报损',
          },
          {
            value: '4',
            label: '盘点报溢',
          },
          {
            value: '5',
            label: '退货报损',
          },
        ],
        opt2: [
          {
            value: '0',
            label: '默认库房',
          },
          {
            value: '1',
            label: '冻货仓库',
          },
        ],
        table1: [],
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
      clickOpen() {
        this.openCol = !this.openCol
      },
      gocreate() {
        this.$router.push('/goods/goodscreate')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .item {
      display: inline-block;
      margin-right: 30px;

      .warning-color {
        color: #ff9f00;
      }
    }
  }
</style>
